Liveswifers Post-Mortem

I first registered an account on liveswifers.org on December 11th, 2006. I was 11 years old at the time. It was this time when the Ajax Animator began. I’m not sure of that, because 5 years past certainly constitutes ancient history for a teenager. It was a huge influence on the development of the Ajax Animator, and it was there that I first encountered some of the future contributors to the project. In fact, the community was kind enough to create an entire subsection of the forum intended to nurture discussion of my pet project, which paralleled their eternal vaporware attempt at resurrecting their namesake program.

Over the next few years, the community decayed and the site became desolate and spam-ridden. There was a period in late 2008 when every indication was that the site would come to an abrupt demise when the domain registration was to expire. The still active community created a backup community on some other forum hosting site and prepared for the worst. I did my part by running WinHTTrack and mirroring the site on my hard disk. It turned out the domain was renewed, and the panic was for nought.

But, when the website finally became a desolate and abandoned wasteland a few years later, the domain lapsed and all the content was lost.

In a nostalgic fit earlier today, I dug up that archive and uploaded it to Google Code. Here you can browse the near entirety of the liveswifers forum as it was, frozen in carbonite those three years ago. I can’t place that date, December, 2006 quite in context, but I would expect that to be approximately the date that the seeds of inspiration were planted. And so maybe not for anyone else, but this site and all its content holds a special place in my mind, and deserves a final resting place shielded from the harsh internet.

1-13-2012 8-11-44 AM

Well it’s been the first time in about two years, and it wasn’t a big change.

So now that the chrome web store has launched, it’s there. You can use it offline and it stores progress with localStorage.

Webstore

http://antimatter15.com/ajaxanimator/webstore.crx

If you run chrome —enable-apps and install it, you might be able to see an icon and magically be able to use the app offline. Or wait until the webstore is finally released and then you can just install it.

Edit July 10, 2010: Actually it was a while ago, but now the app works again and automatically restores the last state using localstorage.

codenamed stick2

One thing the ajax animator’s pretty bad at is stick figures. Sure it’s not impossible, but it can’t really compare with the ol-fashioned frame-by-frame joint-manipulation likeness of Pivot. It’s called stick2 because the original experiment with stickfigures was named stick.html, and when I went to extend it and didn’t feel like setting up a git/svn repo, I copied the file and named it stick2.html, and with no good project-naming skills, it stayed that way.

Anyway, this was a project that got pretty close to completion in early march, but I never bothered to blog about it until now. It should work pretty not-bad on an iPad J(except the color picker), though honestly, I’ve never tried it.

The interface is pure jQuery/html/css. The graphics are done with Raphael, but the player actually uses <canvas> for no particular reason.

Basically, it’s organized into two panels, the left-side figures-box and the bottom timeline. The figures-box contains figures (amazing!) and clicking on them adds them to your canvas. The two defaults are the pivot-style stickman, and something called “blank” which is a root node with no additional nodes. Though it shows up as a orange dot, unless you add something to it, it doesn’t have any actual look when viewed in the player.

On top is the context-sensitive buttons. Well the buttons in my screenshot aren’t context sensitive, they’re permanent. But when you click on a node, a new set of buttons (and words too!) appears. One is a line and the other is a circle. Click them to add a new segment or circle to the currently selected node. Then are various settings for the current segment (each node other than the root one is associated with a segment). Clicking those allows you to modify them. Also, a red X appears on the right, and that basically means remove the node and the child nodes.

So, now you have some extra nodes, how do you change them? Simply hold it down and drag, and the the segments move as well. But note that the length of the segment doesn’t change as you move it. That’s because by default, it locks the length of the segments. There are two ways to get around it. The first is to hold shift while dragging. The second is to tap the little lock icon on the top left.

On the bottom, is the timeline with live-previews of your frames with a semitransparent gray backdrop of numbers. Switch between each one by clicking on them and add one at the end by hitting the green “Add new frame” button.

On the canvas, there are two yellow squares, those allow you to resize the canvas.

On the very left of the top toolbar, is the play button. Hit it and the figures toolbox minimizes and it plays out your animation. Click it again to get back. Then is a little upload button. Hit it and then a little box pops up with a link to where you can find your animation in a way that you can share and to edit (not actually edit, but more like fork, as each save is given a unique id). Next is the download button which you hit, and get prompted by a big prompt-box which you use to paste in the ID of the animation you (or someone else) has saved, so you can edit it. Most of the time that’s useless as when you send a link with the player, it has a button which says “Edit”.

Sample animation: http://antimatter15.com/ajaxanimator/stick2/player.html?rlsm4lx14c

Try the application out: http://antimatter15.com/ajaxanimator/stick2/stick2.html

Code: http://github.com/antimatter15/stick2

This isn’t really new, but I just remembered to write a post about it. Ajax Animator for iPad got a relatively minor, but certainly pretty important update.

The new update incorporates the TouchScroll javascript library to have nice flick-to-scroll-ness throughout native iPad apps.

The VectorEditor core had a few bug fixes, rotation now works and so does resizing (though it’s still susceptible to the always-existent resizing of rotated objects awkwardness - I would love it for someone to fix it). However, resizing doesn’t change the size of the bounding box, which is a somewhat awkward aesthetic but it’s still functional.

Today I went to the magical Apple Store and tried out the iPad for the first time. I really have to say that it’s quite magical, though it doesn’t fulfill the criterion for Arthur C. Clarke’s Third Law despite what Jonathan Ive says. Though I really haven’t tried any large area multitouch interface before (sadly), and I would expect it to be a somewhat similar if not exact replica of the experience. Keynote and Numbers were pretty neat (I suck at typing on the iPad in any orientation, so I don’t like Pages). That’s enough to show that iPad is not just a content consumption tool as the iPod and iPhone primarily are, but also content creation.

Anyway, in a few minutes I just swapped the mousedown, mousemove, mouseup events with touchstart, touchmove, touchend events respectively in the core of VectorEditor, while adding a new MobileSafari detection script (var mobilesafari = /AppleWebKit.*Mobile/.test(navigator.userAgent);) and in a quite analogous “magical” way, VectorEditor works in iPhone/iPod Touch and theoretically iPad, Just dragging the vectoreditor files over to the Ajax Animator folder and recompiling should bring iPad support to Ajax Animator with virtually no work.

I haven’t tested it. Downloading XCode 3.2.2 right now so hopefully I can test it soon. Stupid how it’s what? 2.31 gigabytes?!

And possibly, I could use PhoneGap to hack together a App Store app which does the same thing (and maybe charge for it, which might be a bit cruel as this application is open source and works equivalently online - but I guess that’s okay for those people who don’t read my blog >:) ). Maybe get enough to buy an iPad :P

Anyway, though I’m pretty late to this and my opinion probably doesn’t matter at all, here’s a mini iPad review: It’s really really cool, feels sort of heavy, really expensive, hard to type on in any orientation (interestingly it has that little linke on the f and j keys with the keyboard which feels useless since I always thought the point of that was so you can tactile-ily or haptically or tactically or whatever the right word is, find the home row, but since there’s no physical dimension to an iPad, it just strikes me as weird and wanting of that tactile keyboard). Otherwise, browsing really really feels great. Only thing I miss is the Macbook Pro style 3 finger forward/backward gestures (@AAPL plz add this before iPad2.0, and also, get iPhoneOS 4.0 to work on my iPhone 2g or at least @DevTeam plz hack 4.0 for the 2g!).

Oh, and for those lucky enough to have a magical iPad, the URL is http://antimatter15.com/ajaxanimator/ipad/ at least until there’s enough testing to make sure that I didn’t screw up everything with my MobileSafari hacks.

The Ajax Animator (Wave/Mini interface version) now has support for basic Onion skinning, where the last keyframe is semitransparently placed in the background to aid in the positioning of the next keyframe. It’s now enabled by default at 20% opacity but can be disabled.

ajax-animator

To disable it, click the advanced button on the right side of the toolbar and find the entry labeled Onion Skinning, there you can set the onion skinning opacity or disable it with 0% opacity.

onion-skinning

Screenshot

Ubuntu’s weird and adding a bar on top of all my screenshots

http://antimatter15.com/ajaxanimator/VectorEditor/stickfigure.html

I like stick figures, and browsing YouTube, I found some things on Pivot and Pencil (really awesome free desktop animation apps), and that made me think, Stick figures are awesome. So I’m going to add some better Stick Figure features into Ajax Animator and possibly upstream to VectorEditor eventually.

So I decided to mix up an old project, which I was almost about to migrate to GitHub but it’s still on Google Code (http://code.google.com/p/datastore-service/) which was basically a free service that allows easy prototyping of things by providing basic persistence (using JSONP). So I mixed it up with the Ajax Animator Standalone Player, so the Google Wave version of the ajax animator will have a Publish button which will upload things to a server and give you a shareable URL Such as http://antimatter15.com/ajaxanimator/player/player.htm?1e025941543678 while it would be great if a) the URL was shorter and b) the URL was more customizable, it works basically.

So I think that the Ajax Animator Wave thingy is almost done. I think it’s really awesome, there’s some new stuff in there that may help in collaboration. There is still a bit of dogfooding left (VectorEditor needs to be updated as while the new version of Raphael is being used which eliminates a lot of the hacks being used, the change in path APIs means that lines, polylines and paths all fail). So after a bit of more bug testing, I think it’s going to be pretty cool. It will definately be out by the time the 100,000 people join Google Wave (I can’t wait!). But I’m not sure if it will be today, next week, or the week after that.

So to show some cool stuff I can do, I’ll publish the first time this blog has ever really seen an animation by me. But here’s the first animation I’ve made (It uses the Wave, center and flip plugins which you can access in the script executor, but someone could easily and tediously do this by hand too):

Wavey

The cool stuff being used here are first the ability to draw a rectangle, to multi-select, multi-copy, multi-paste and manual repeatition. After that, it’s multi-dragged down, and next frame then, the Ax.plugins\["center"]() plugin is called which obviously centers all of them (by the Y axis, preserving the X one). Then it goes to the next keyframe and using Ax.plugins["Sine"](100,0.01) (first arg defines multiplier for y axis and latter defines something I forgot, i think multiplier for the current X axis). Then the same function but with (100,0.02) and then Ax.plugins.flip() to make it look like the wave logo. Do some multi-select and set the color. After that cool stuff, it gets saved as text and opened in OnlyPaths Ajax Animator (which also demos a really cool feature called forwards-compatibility). It gets saved as a GIF and uploaded to my blog after that.

http://jsvectoreditor.googlecode.com/

There’s the project page! If you want to try it out, the link is below. It’s only been tested on Firefox 3.0 so far, and please comment if there are any issues.

http://jsvectoreditor.googlecode.com/svn/trunk/index.html

Really, nothing much. There are some corrections to the About page, and some more icons. There is also a non-working Bug-Reporting tool.

I will try adding OnlyPaths soon, but it still needs much work. (and it’s Build 40 now!!!)

This was a really small project of mine. It is (going to be) open source, but I’ll probably never work on it again. It has a much larger number of tools than Ajax animator. The editing will be much a relief, and so much better than rich draw. Sadly, it has no tweening, frame duplicating, effects, or any of the features in Ajax animator.

It is currently only for Windows with .net framework 2.0 installed, Mono/Wine is not tested (but Mono has to be used with wine, as it calls swfmill.exe (win32 binary) for flash generation.

About the name:Liveswif has been a great piece of software, probably the best (free) flash IDE ever. Sadly, it has been discontinued for since years ago. The community has been working on something called “OpenSwif” it was supposed to be the successor to the famed liveswif. The problems were, that liveswif was proprietary (freeware), so they had no codebase to begin on. Ajax Animator started out as something for the developers of OpenSwif to get inspiration off of, and just one of my random ideas. As of now, OpenSwif still has no released imagery/source/binaries; there is only one developer, and no signs of active development. I just decided one day, discovering some information to be mentioned in the next paragraph, that I could really do things a lot better than they were doing now. I, for once, actually utilized the wonders of open source, forking. As everyone on the OpenSwif team were acting as if OpenSwif was proprietary.

I, reading up on swfmill, discovered it had something called SVG import, meaning, it could read a svg file to convert into SWF. With this realization, I quickly searched VB.NET (my first programming language, btw, but I like JS more now) SVG Editor. Too much dismay, no VB.NET SVG editors existed, but I found one coded in C#. I made a TODO list that basically said: Make Timeline, Attach Timeline, Hack SVG Paint, and attach Swfmill. It was with much less work than I expected. Being a crappy c# coder, I made most of it in VB.net, and converted it to c# (using online tools). The timeline was pretty easy (20 lines of vb code), which fit easily on the SVGPaint layout. Then I hacked the saving mechanism to save automatically (without user interference), which was as simple as deleting all the references to message boxes (well, in docmanager.cs). I built a quick and dirty swfmill launcher program that generated the necessary markup. And sadly, it didn’t work. After a bit of experimentation, I discovered that you have to attach an ID to every svg element, which the program didn’t do. I just had to add “id=shape”+rand.Next(9999999).toString() somewhere and voila, I finished the flash ide. All in less than 50 lines of code. Now all I needed to do is to rebrand it (evilest, no…um… I mean easiest part).

In retrospect, I probably wrote more in this essay (article or whatever) than all the work I spent on the ForkSwif project.

Read more at:

http://www.pryjon.com/liveswifers/forums/viewtopic.php?t=1377 http://www.pryjon.com/liveswifers/forums/viewtopic.php?t=1364 http://code.google.com/p/forkswif/

What the heck is wrong with me and writing such long essays for random news topics?!?! I should spend this effort on homework…..

Ajax Animator

Gmail revolutionized email by offering a web based equivalent to Outlook and Thunderbird, except this was completely web based. No more Installing. So did Google Docs and Spreadsheets, or Zoho office, or etc, they had entirely free and web based clones of Microsoft Office or OpenOffice. Or Microsoft Windows, then there is Linux and now there is desktoptwo eyeos and youos. I think of it as a development cycle, somebody makes something that is expensive, then something free, then something entirely Web based. Now, what about Flash. According to adobe, 97% of all people who browse the Internet have flash player installed. By far larger than the amount of people who have outlook, thunder bird, Microsoft office, or Openoffice installed. Flash also accounts for a large percent of So why isn’t there a freeware open source replacement to this $400 software? There are though, UIRA, F4L, QFlash, KDSFlash, and more, but they are early in development. So when is the third generation web 2.0 equivalent for animation software coming? This is what I want to develop. This is a project to make an open-source browser based Flash Authoring system.

Please post comments in the shout box.